<template>
	<div class="algorithm-visualization">
		<el-row type="flex" justify="center">
			<el-col :span="12">
				<div id="array-box">
					<table class="variable-widgets">
						<tbody>
							<tr>
								<td><div id="array-next-kmp-name"></div></td>
								<td>
									<center>
										<div id="array-next-kmp"></div>
									</center>
								</td>
							</tr>
							<tr>
								<td><div id="array-s-kmp-name"></div></td>
								<td>
									<center>
										<div id="array-s-kmp"></div>
									</center>
								</td>
							</tr>
							<tr>
								<td><div id="array-t-kmp-name"></div></td>
								<td>
									<center>
										<div id="array-t-kmp"></div>
									</center>
								</td>
							</tr>																			
						</tbody>
					</table>
				</div>
			</el-col>
			<el-col :span="12">
				<div id="pseudocode-kmp" title="int KMP(char *s, char *t, int *next):">
					int i = 0, j = 0;

					while (i < strlen(s) && j < strlen(t))
					{
					    if (j == -1 || s[i] == t[j]) 
					    {
					        i++;
					        j++;
					    }
					    else 
					        j = next[j];
					}

					if (j == strlen(t))
					    return i - j;
					else 
					    return -1;
				</div>
			</el-col>
		</el-row>
		<div id="controls-kmp" style="margin-top:20px"></div>
	</div>
</template>

<script>
export default {
	mounted() {
		let _this = this
		let mainString = 'abcabcabcb'
		let patternString = 'abcabcb'
		let nextArray = [-1, 0, 0, 0, 1, 2, 3]
		
		$(function () {
			_this.service = new Vamonos.Visualizer({
						widgets: [
							new Vamonos.Widget.Hardcoded({ breakpoints: [1] }),

							new Vamonos.Widget.VarName({
								container: "array-s-kmp-name",
								varName: "s",
							}),	
							
							new Vamonos.Widget.Array({
								container:    "array-s-kmp",
								varName:      "s",
								defaultInput: mainString,
								cssRules: [
									[">", "i", "shaded"]
								],
								showIndices: ["i"],
							}),	
												
							new Vamonos.Widget.VarName({
								container: "array-t-kmp-name",
								varName: "t",
							}),	
							
							new Vamonos.Widget.Array({
								container:    "array-t-kmp",
								varName:      "t",
								defaultInput: patternString,
								cssRules: [
									[">", "i", "shaded"]
								],								
								showIndices: ["j"],
							}),
							
							new Vamonos.Widget.VarName({
								container: "array-next-kmp-name",
								varName: "next",
							}),	
							
							new Vamonos.Widget.Array({
								container:    "array-next-kmp",
								varName:      "next",
								defaultInput: nextArray
							}),

							new Vamonos.Widget.Controls({
								container:        "controls-kmp",
								runStopButton:    false,
								showWhileSliding: false
							}),
							
							new Vamonos.Widget.Pseudocode({
								container: "pseudocode-kmp",
								breakpoints: [1, 2, 4, 6, 7, 10, 12, 13, 15]
							})							
						],
						autoStart: true,

						algorithm: function (_) {
							_(1);	this.i = 0; this.j = 0;
							_(2); 	while (this.i < this.s.length && this.j < this.t.length)
									{
							_(4);		if (this.j === -1 || this.s[this.i] == this.t[this.j])
										{
							_(6);			++this.i;
							_(7);			++this.j;
										}	
										else {
							_(10);			this.j = this.next[this.j];
										}
									}
							_(12);	if (this.j === this.t.length)
									{
							_(13);		return this.i - this.j
									}
									else
									{
							_(15);		return -1
									}
						}
					});			
		});
	}
}
</script>

<style>
</style>
